<template>
    <nly-content-wrapper class="content-warpper-2">
        <div class="content-header-2" >
        </div>
        <nly-content>
            <!-- 列表 -->
            <a-table :columns="columns" :data-source="data" bordered :scroll="{ x: 1000, y: 500}" :pagination="pagination" :row-selection="rowSelection"  @change="onTableChange" :loading="false">
            </a-table>
         
        </nly-content>  
    </nly-content-wrapper>
</template>

<script>
import { mapState } from "vuex";
import { pageRecord} from "@/api/crm/call/callMinutes";

export default {
 
    data () {
        const columns = [
            {
                align: "left",
                title: "年份",
                dataIndex: "year",
                width: 80,
            },
             {
                align: "left",
                title: "月份",
                dataIndex: "month",
                width: 80,
            },
             {
                align: "left",
                title: "总时长",
                dataIndex: "totalMinutes",
                width: 80,
            },
            {
                align: "center",
                title: "已用套餐分钟数",
                dataIndex: "baseMinutesUsed",
                width: 80,
            },
            {
                align: "center",
                title: "当月已用通用分钟",
                dataIndex: "generalMinutesUsedMonth",
                width: 100,
            },
            {
                align: "left",
                title: "总金额",
                dataIndex: "totalAmount",
                width: 100,
            },
            {
                align: "left",
                title: "套餐金额",
                dataIndex: "baseAmount",
                width: 100,
            },
            {
                align: "left",
                title: "通用金额",
                dataIndex: "generalAmount",
                width: 100,
            },
            {
                align: "left",
                title: "剩余通用分钟数",
                dataIndex: "generalMinutesRemain",
                width: 100,
            },
        ];
        return {
            postData: {
                page:{
                    "current": 1,
                    "size": 20
                }
            },
            selectedKeys: [], //工序table选中key
            selectedData: [],
            pagination: {
                defaultPageSize: 20,
                size: "small",
                current: 1,
                pageSize: 20,
                total: 0,
                showTotal: total => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input-number
                                value={this.pagination.pageSize}
                                min={1}
                                max={500}
                                onPressEnter={e => this.changePageSize(e)}
                            />
                            条
                        </div>
                    );
                },
                showQuickJumper: true,
                showLessItems: true
            },
            numberReg: /^[1-9]{1}[0-9]*$/,
            floatReg: /^-?[0-9]*(\.[0-9]*)?$/,
            data: [],
            columns,
        };
    },
    created(){
        this.reLoadData();
    },
    mounted(){

    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
        rowSelection() {
            let { userInfo } = this;
            return {
                columnWidth:30,
                selectedRowKeys:this.selectedKeys,
                onChange: this.userSelection,
                getCheckboxProps: record => ({
                    props: {
                        disabled: record.status > 1, 
                    },
                }),
            };
        },
    },
    watch: {
       
    },
    methods: {
        reLoadData(){
            this.pageList();
        },
         //点击分页
        onTableChange (pagination, filters, sorter) {
            Object.assign(this.postData, {
                page:{
                    size:pagination.pageSize,
                    current: pagination.current,
                }
            });
            Object.assign(this.pagination, {
                current: pagination.current,
                pageSize: pagination.pageSize
            });
            this.pageList();
        },
        //改变 分页大小
        changePageSize (e) {
            const value = e.target.value;
            Object.assign(this.postData, {
                page:{
                    size: value,
                    current: 1,
                }
            });
            Object.assign(this.pagination, {
                pageSize: Number.parseInt(value),
                current: 1,
            });
            this.pageList();
        },
         userSelection (keys, rows) {
            this.selectedKeys = [];
            this.selectedKeys = keys;
            this.selectedData = rows;
        },
        //获取列表
        pageList () {
            const { postData } = this;
            pageRecord(postData).then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    const { records, total, current, size } = data;
                    this.data = records;
                    this.data.forEach(item => {
                        item.key = item.id;
                    });
                    Object.assign(this.pagination, {
                        total,
                        current,
                        pageSize: size
                    });
                }
            }).catch(error => { });
        },
        //条件改变
        onConditionChange(){
            Object.assign(this.postData.page,{current:1});
            this.pageList();
        },
    }
};
</script>
<style scoped >

 
   
    .form-inline label {
        justify-content: left !important;
    }
    .form-inline > .col {
        margin-bottom: 1.5rem !important;
    }
    .icons-list >>> .anticon {
        margin-right: 8px;
        font-size: 16px;
    }
    .ant-advanced-search-form {
        padding: 24px;
        background: #fbfbfb;
    }

    .ant-advanced-search-form .ant-form-item {
        display: flex;
        margin-bottom: 0px !important;
    }

    .ant-advanced-search-form .ant-form-item-control-wrapper {
        flex: 1;
    }

    #components-form-demo-advanced-search .ant-form {
        max-width: none;
    }
    #components-form-demo-advanced-search .search-result-list {
        margin-top: 16px;
        background-color: #fafafa;
        min-height: 200px;
        text-align: center;
        padding-top: 80px;
    }

    
</style>
<style lang="less" scoped>


/* 按钮组样式 */
.call-button-list {
    height: 80px;
    .call-button {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }
}

   .renwu-from {
         display: flex;
         min-height: 35px;
         line-height: 35px;
         margin-top: 10px;
         .renwu-frisht {
            width: 120px;
         }
         .renwu-secend {
            width: 350px;
            .play-btns {
                margin-left: 10px;
            }
            .ant-input,.ant-select-selection{
            width: 100%;
            outline: none;
            border: 1px solid #C6C1C1 !important;
            width: 100%;
            }
         }
     }
  //任务详情
    .task-detail{
        border: 1px solid #e8e8e8;
        background: #fff;
        border-radius: 2px;
        position: relative;
        box-sizing: border-box;
        color: rgba(0,0,0,.65);
        line-height: 1.5;
        font-size: 14px;
        margin-top:-5px;
        margin: 0px 5px 10px 5px;
        .task-detail-header{
            padding: 14.5px 24px;
            background: #f2f3f5;
            border-bottom: 1px solid #e8e8e8;
            color: rgba(0,0,0,.85);
            min-height: 40px;
            font-size: 16px;
            font-weight: 500;
            border-radius: 2px 2px 0 0;
        }
        .task-detail-content{
            padding: 8px 24px 3px 24px;
            .task-detail-item{
                margin-bottom: 5px;
                .task-detail-title{
                    display: inline-block;
                    width: 60px;
                    margin-right: 8px;
                    color: #7b7979;
                }
            }
        }
    }
</style>